<template>
	<div style="background: rgb(245, 247, 250); padding-top: 20px;">
		<div class="t_a1">
			<div class="top-title" style="margin-bottom: 15px;">
				<div class="top-title-content" @click="tapnav(0)">
					<div class="top-title-in" :style="state.currentNum==0? 'border: 3px solid rgb(255, 75, 64);':''">
						<span :style="state.currentNum==0? 'color: rgb(255, 75, 64);':''">00:00</span><span
							:style="state.currentNum==0?'color: black;':''">/40:00</span>
					</div>
					<div class="top1" :style="state.currentNum==0?'color: rgb(255, 75, 64);':''">LISTENING</div>
				</div>
				<div class="top-title-bar"></div>
				<div class="top-title-content" @click="tapnav(1)">
					<div class="top-title-in" :style="state.currentNum==1? 'border: 3px solid rgb(255, 75, 64);':''">
						<span :style="state.currentNum==1? 'color: rgb(255, 75, 64);':''">00:00</span>
						<span :style="state.currentNum==1?'color: black;':''">/60:00</span>
					</div>
					<div class="top1" :style="state.currentNum==1?'color: rgb(255, 75, 64);':''">READING</div>
				</div>
				<div class="top-title-bar"></div>
				<div class="top-title-content" @click="tapnav(2)">
					<div class="top-title-in" :style="state.currentNum==2? 'border: 3px solid rgb(255, 75, 64);':''">
						<span :style="state.currentNum==2? 'color: rgb(255, 75, 64);':''">00:00</span>
						<span :style="state.currentNum==2?'color: black;':''">/60:00</span>
					</div>
					<div class="top1" :style="state.currentNum==2?'color: rgb(255, 75, 64);':''">WRITING</div>
				</div>
			</div>
		</div>
		<listenTest v-if="state.currentNum == 0"></listenTest>
		<readTest v-else-if="state.currentNum == 1"></readTest>
		<writeTest v-else></writeTest>
	</div>
</template>
<script setup>
	import readTest from './ReadTest.vue'
	import listenTest from './ListeningPractice.vue'
	import writeTest from './WriteTest.vue'
	import {
		reactive,
		getCurrentInstance,
		onMounted,
		onBeforeMount,
		nextTick,
		provide
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	const {
		proxy
	} = getCurrentInstance()
	const state = reactive({
		mockData: '',
		currentNum: 0,
		mockDataList: [],
		paperId1: '1',
		paperId2: '',
		paperId3: ''
	})

	function tapnav(num) {
		state.currentNum = num
		if (state.currentNum == 2) {
			proxy.$http.get('/boot/api/questions/paper/queryById?id=' + state.paperId3).then(res => {
				let obj = res.data.result.examList[0]
				state.content = obj
				obj.contentText =
					`<style> *[wi100dth='wi100dth']{width:100% !important;height:auto !important;}</style>` +
					obj
					.contentText
				obj.contentText = obj.contentText.replace(/\<img/g, '<img wi100dth="wi100dth"')
				obj.contentText = obj.contentText.replace(/\<table/g, '<table wi100dth="wi100dth"')
				state.examListConten = obj
				localStorage.setItem('WriteTest', JSON.stringify(state.examListConten))
				provide('WriteTest', JSON.stringify(state.examListConten))
			})
		}
	}

	onBeforeMount(() => {
		state.mockData = JSON.parse(route.query.mockData)
		state.mockDataList = state.mockData.mockPaperList
		state.mockDataList.forEach(function(item) {
			if (item.paperType == '1') {
				state.paperId1 = item.paperId
			} else if (item.paperType == '2') {
				state.paperId2 = item.paperId
			} else {
				state.paperId3 = item.paperId
			}
		})
		provide('paperId1', state.paperId1)
		provide('paperId2', state.paperId2)
		provide('paperId3', state.paperId3)
	})
</script>
<style lang="scss" scoped>
	[v-cloak] {
		display: none;
	}

	.top-title {
		margin-bottom: 15px;
		background: #F5F7FA;
		width: 900px;
		height: 60px;
		margin: 0 auto;
		margin-bottom: 20px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.top-title-content {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		cursor: pointer;
	}

	.top-title-in {
		border: 3px solid #DFE3E9;
		width: 150px;
		height: 35px;
		border-radius: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #c9d4e4;
		font-size: 16px;
		font-weight: 600;
	}

	.top-title-bar {
		width: 300px;
		background: #DFE3E9;
		height: 10px;
	}

	.top1 {
		margin: 0 auto;
		color: #c9d4e4;
		font-size: 16px;
		font-weight: 600;
	}

	.modal-btn1 {
		height: 35px;
		padding: 0 10px;
		font-size: 14px;
		color: #FFFFFF;
		background-image: linear-gradient(90deg, #FF8D80 0%, #FF574D 100%);
		border-radius: 6px;
		margin: 0 3.2%;
		cursor: pointer;
	}

	.modal-round {
		background: rgb(188, 188, 188);
		color: white;
		width: 25px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30px;
		font-size: 10px;
	}
</style>